$(function () {
     /* 
     1 基本功能 
          1 数据动态渲染
          2 点击左侧 右侧也跟着动态渲染
               1 点击左侧菜单 左侧菜单 激活选中 其他兄弟元素 排他
               2 右侧也跟着动态渲染 右侧渲染的关键 来改变 要渲染的数据的索引！！！   renderRight(index) {
     2 优化
          1 实现滚动条的弹簧效果 iscroll 通过js 来改变要滚动 标签的 transform 来实现
            1 不要再使用原生的滚动条了！！ 在css中先hidden 
            2 引入 js 文件
            3 等待标签都生成了 都有高度了 再去做初始化
                    var leftScroll=new IScroll(".要滚动的元素的 父容器")
            4 点击左侧菜单的时候 左侧菜单 往上置顶的效果
               1 用原生js来实现 在项目中 不推荐！！
               2 找iscroll 来实现  推荐 马上来实现！！
                    1 去找文档
                    2 去demo 插件会提供的一些案例   去你下载iscroll的地方找
            5 右侧滚动
                    1 iScroll 容器元素的第一个子元素能进行滚动，其他子元素完全被忽略
                    2 不要再使用 css中滚动条了
                    3 右侧是图片列表 必须要等到最后一张图片加载完毕之后才去做初始化 因为 要有高度 而且有优化
          2 提取公共的url 
               1 zepto的拦截器 可以在ajax发送前被调用 
          3 正在等待。。
            1 发送ajax之前 显示一个 效果
              1  最简单 在网上找一张图片 正在等待的动态图 gif 
              2  通过字体图标来实现  一个clas来实现 
                    body上有class  显示正在等待
                    body 移除class  正在等待的效果 隐藏。。
                1 直接去赋值我的文档中的代码
                2 体验自己是实现图标 
            2 发送ajax 成功之后 隐藏。。。 
          4 实现缓存
            1 在发送请求之前 先看一下本地有没有数据  
               0 存在优化空间  加入一个过期的时间！！！
               有数据 就使用本地存储中的旧的数据
                    判断数据有没有过期
                    过期了  重新发送请求去获取新的数据
                    没有过期 再使用旧的数据 
               没有数据 
                    1 重新发送请求去获取新数据 
                    2 把数据存入到本地存储中！！！
                
          5 使用rem ? 
               1 首页其他页面为甚不用  为什么不在rem的设置放到公共的样式 js里面？
                    看需求而定！！
               2 rem原理
                    1 屏幕宽度改变 -> 对应的媒体查询或者是一段js ->改变html标签的fontsize
                      -> 改变 页面中使用rem单位的标签的样式 
               3 其他补充
                 1 计算字体大小的公式
                     要计算的fontsize的大小=  基础值(100px) *  要适配的屏幕的宽度/   设计稿的宽度 （320）
                 2 媒体查询和 js 都可以改变 字体的大小 
                    1 优先使用js 简单和方便。。
                    2 当项目的需求变得多了不好维护 再去考虑使用媒体查询 
                         当屏幕宽度= 320 背景颜色 -》green
                         当屏幕宽度= 640 背景颜色 - yellow
                         当屏幕宽度= 800 背景颜色 - yellow 字体的按大小 50px

     
     
      */

     // 全局变量 分类的数据
     var CateDatas;
     // 左侧的滚动条对象
     var LeftScorll;

     init();

     function init() {
          renderCategories();
          eventList();
     }
     /**
      * 绑定一坨事件！！！
      */
     function eventList() {
          // 绑定 左侧菜单的点击事件tap
          // 标签如果是动态生成 建议使用委托的方式来绑定  给一个一直存在的父容器绑定tap点击事件 给它里面的zi容器来触发！！！
          $(".left").on("tap", "li", function () {
               // console.log("恶魔妈妈买面膜 emmmmmm");
               // 1 点击 选中 其他排他
               $(this).addClass("active").siblings().removeClass("active");
               // 2 获取被点击的li标签的索引？？
               // index() 方法只有jq或者zepto才有 js原生的方法里面没有！！！
               var index = $(this).index();
               // console.log(index);
               // 2. 2 渲染右侧
               renderRight(index);

               // 3 点击菜单 往上置顶
               LeftScorll.scrollToElement(this);

          })

          // 屏幕的宽度改变的事件
          window.onresize = function () {
               // console.log(123);
               setFont();
          }
     }
     /**
      * 渲染数据
      * 1 数据的来源不一定是发送请求了 有可能使用本地存储 
      * 
      */
     function renderCategories() {
          /* 
          1 先判断本地存储有没有数据
               1 会话还是使用永久-使用这个 ？？ 看需求而定 
               2 规定key "cates"
           */

          //  1 判断永久存储中有没有旧的分类数据 默认值 null
          if (localStorage.getItem("cates")) {
               // 有
               // 先取出旧的数据 字符串的类型
               // var catesStr = localStorage.getItem("cates");
               // 解析成 对象|数组类型
               // CateDatas = JSON.parse(catesStr);
               // 把数据渲染到页面上 

               // renderLeft();

               // renderRight(0);

               // 先取出旧的数据 字符串的类型
               var catesStr = localStorage.getItem("cates");
               // 解析成 对象|数组类型
               var localData = JSON.parse(catesStr);

               //  判断数据有没有过期 过期时间 自定义的 10s
               if (Date.now() - localData.time > 10 * 1000) {
                    // 过期了 
                    getCategories();
               } else {
                    // 没有过期 
                    CateDatas = localData.data;
                    renderLeft();
                    renderRight(0);
               }


          } else {
               // 没 重新发送请求
               getCategories();
          }



     }
     /**
      * 根据左侧被选中的索引来渲染右侧的内容
      * @param {Number} index  左侧的索引
      */
     function renderRight(index) {
          // CateDatas=result.data;

          var childrens = CateDatas[index].children;
          // console.log(childrens);
          var rightHtml = template("rightTpl", {
               data: childrens
          });
          $(".right").html(rightHtml);

          // 初始化右侧的滚动条 
          // 1 iScroll 容器元素的第一个子元素能进行滚动，其他子元素完全被忽略
          // 额外添加了一个div 在模板里添加
          // 2 图片标签 标签生成了 但是 内容不一定马上显示 高度不一定有！！！
          // 3 图片 高度 必须要等待内容都加载完了 才有高度！！！
          // 4 图片 高度 必须要等待最后一张图片 内容都加载完了 才有高度！！！
          // 5 最后一张 不是指索引的最后一张 而是 安装加载的顺序 最后一张加载完毕的 
          // load 图片加载完毕了 自动触发的一个事件！！！

          // 获取要加载的图片的长度
          var times = $(".right img").length;
          $(".right img").on("load", function () {
               times--;
               if (times == 0) {
                    // console.log("触发的次数");
                    var rightScroll = new IScroll(".right");
               }
          })


     }
     /**
      * 使用全局数据的变量渲染左侧
      */
     function renderLeft() {
          // 渲染左侧的 菜单
          var leftHtml = template("leftTpl", {
               data: CateDatas
          });
          $(".left").html(leftHtml);

          // 初始化左侧的滚动条
          LeftScorll = new IScroll(".left");

     }
     /**
      * 发送请求获取数据
      */
     function getCategories() {
          $.get("categories", function (result) {
               if (result.meta.status == 200) {
                    // 给全局变量赋值  后面再使用到 接口的返回的数据的时候 全部都是通过全局变量来 使用
                    CateDatas = result.data;
                    //     存入分类页面的数据  注意要转json字符串
                    // 扩展了存入到本地存储中的对象
                    var obj = {
                         data: CateDatas,
                         // 返回1970 1 1 到现在的时间戳 毫秒。。
                         time: Date.now()
                    }
                    var jsonCateDatas = JSON.stringify(obj);

                    localStorage.setItem("cates", jsonCateDatas);
                    renderLeft();

                    // 假设 要存的数据
                    // var data = {
                    //      time:"当前的时间",
                    //      arr:[{
                    //           img: ""
                    //      }, {
                    //           img: ""
                    //      }, {
                    //           img: ""
                    //      }, {
                    //           img: ""
                    //      }]
                    // }

                    // 渲染右侧的内容 
                    // 确定要渲染的数据的  模样
                    // var childrens=result.data[4].children;
                    // // console.log(childrens);
                    // var rightHtml=template("rightTpl",{data:childrens});
                    // $(".right").html(rightHtml);

                    renderRight(0);
               } else {
                    // 失败
               }

          })

     }


     setFont();



     function setFont() {
          // 要计算的fontsize的大小=  基础值 *  要适配的屏幕的宽度/   设计稿的宽度 （640）

          // 基础值 100px
          var baseVal = 100;
          // 设计稿的宽度 320
          var pageWidth = 320;
          // 要适配的屏幕的宽度= 当前的屏幕的宽度
          var screenWidth = document.querySelector("html").offsetWidth;
          // 要设置的字体的大小
          var fz = baseVal * screenWidth / pageWidth;
          // 把字体的大小设置到 htm标签中
          document.querySelector("html").style.fontSize = fz + "px";
     }

})